<template>
  <div class="system-main">
    <el-icon v-if="isSystem" class="setting-icon" @click="jumpSetting"><Setting /></el-icon>
    <span v-else></span>
    <CollapseIcon id="collapseIcon" />
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
const authStore = useAuthStore();
const router = useRouter();
import CollapseIcon from "@/layouts/components/Header/components/CollapseIcon.vue";

const isSystem = computed(() => authStore.showMenuListGet.find(item => item.name === "system"));
const jumpSetting = () => {
  console.log(isSystem.value);
  // 动态跳转
  router.push(isSystem.value?.children[0].path);
};
</script>
<style lang="scss" scoped>
.system-main {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 20px;
  margin-top: 1px solid rgb(244 244 244);
  .setting-icon {
    font-size: 18px;
    cursor: pointer;
  }
}
</style>
